<template>
  <ElButton>登录</ElButton>
  <ElButton>注册</ElButton>

  <div v-if="true">
    <ElInput>
      <template #prepend>注册账号</template>
    </ElInput>

    <ElInput>
      <template #prepend>密码</template>
    </ElInput>
  </div>

  <div v-if="false">
    <ElInput>
      <template #prepend>登录账号</template>
    </ElInput>

    <ElInput>
      <template #prepend>密码</template>
    </ElInput>
  </div>

  <ElButton @Click="dialongLogin = true">登录</ElButton>

  <ElDialog
    title="登录"
    align-center="true"
    v-model="dialongLogin"
    center="true"
    close-icon="CloseBold"
    width="40%"
    @open="isLoginInfo=true"
    
  >

    <template #header>
      <div style="display: flex;justify-content: center;">
        <div >
          <ElLink :underline="false"><div style="font-size: 18px;font-weight: 350;" @click="logining">登录状态</div></ElLink>
        </div>
       <ElDivider direction="vertical"></ElDivider>
        <div @click="reging">
          <ElLink :underline="false"><div style="font-size: 18px;font-weight: 350;" >注册状态</div></ElLink>
        </div>
      </div>
    </template>
  

    <div v-if="isLoginInfo"> 
      <ElInput placeholder="账号" v-model="loginInfo.username" size="large">
        <template #prepend>账号</template>
      </ElInput>
      <ElInput placeholder="密码" show-password="true" v-model="loginInfo.password" size="large"> 
        <template #prepend>密码</template>
      </ElInput>
    </div>

    
    <div v-if="!isLoginInfo"> 
      <ElInput placeholder="账号" v-model="loginInfo.username" size="large">
        <template #prepend>注册账号</template>
      </ElInput>
      <ElInput placeholder="密码" show-password="true" v-model="loginInfo.password" size="large">
        <template #prepend>注册密码</template>
      </ElInput>
    </div>

    <template #footer>
      <div v-if="isLoginInfo" style="display: flex;">
      <ElButton @click="isLoginInfo=false" style="width: 100%;">注册</ElButton>
      <ElButton type="primary" style="width: 100%;">登录</ElButton>
    </div>
    <div v-if="!isLoginInfo">
     
      <ElButton type="primary" style="width: 50%;">登录/注册</ElButton>
    </div>

    </template>
  </ElDialog>


</template>

<script setup>
import {
  ElButton,
  ElDialog,
  ElDivider,
  ElIcon,
  ElImage,
  ElInput,
  ElLink,
} from 'element-plus';
import { id } from 'element-plus/es/locales.mjs';
import { ref } from 'vue';

const dialongLogin = ref(false);
const isLoginInfo = ref(true);
const loginInfo=ref({
  username:'',
  password:'',
})

const reging=()=>{
  isLoginInfo.value=false;
  const div=document.querySelector('div')
  div.classList.add('blue');
  
}

const logining=()=>{
  isLoginInfo.value=true;
  const div=document.querySelector('div')
  div.classList.add('blue');
  
}

</script>

<style scoped>
.body {
  content: '';
  background-image: url('/image/preview01.jpg');
  background-size: cover;
  background-position: center;
}

.blue{
  color: blue;
  background-color: rgb(7, 227, 227);
}
</style>
